﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
	<tr>
		<td>
			<p color="black">您正在做的业务是:人力资源--客户化设置--人力资源档案管理设置--III级机构设置</p>
		</td>
	</tr>
	</table>
	<el-button plain v-on:click="Add()">新增</el-button>
	<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
		<el-table-column prop="firstKindName" label="I级机构名称" min-width="120%"></el-table-column>
		<el-table-column prop="secondKindName" label="II级机构名称" min-width="120%"></el-table-column>
		<el-table-column prop="thirdKindId" label="III级机构编号" min-width="120%"></el-table-column>
		<el-table-column prop="thirdKindName" label="III级机构名称" min-width="120%"></el-table-column>
		<el-table-column prop="thirdSaleId" label="销售责任人编号" min-width="120%"></el-table-column>
		<el-table-column prop="thirdKindIf" label="是否为零售店" min-width="120%"></el-table-column>
		<el-table-column label="变更">
			<template #default="scope">
				<el-button size="small" v-on:click="handleEdit(scope.row)">
					变更
				</el-button>
			</template>
		</el-table-column>
		<el-table-column label="删除">
			<template #default="scope">
				<el-button size="small" v-on:click="handleDelete(scope.row.ftkId)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="dialogVisible"
			   title="III级机构变更"
			   width="800">
		<span>
			<el-form ref="uruleFormRef" :model="uform" :rules="urules" label-width="auto" style="max-width: 750px">
				<el-form-item label="I级机构名称" prop="firstKindName">
					<el-input v-model="uform.firstKindName" />
				</el-form-item>
				<el-form-item label="II级机构名称" prop="secondKindName">
					<el-input v-model="uform.secondKindName" />
				</el-form-item>
				<el-form-item label="III级机构编号" prop="thirdKindId">
					<el-input v-model="uform.thirdKindId" />
				</el-form-item>
				<el-form-item label="III级机构名称" prop="thirdKindName">
					<el-input type="textarea" rows="5" v-model="uform.thirdKindName" />
				</el-form-item>
				<el-form-item label="销售责任人编号" prop="thirdSaleId">
					<el-input type="textarea" rows="5" v-model="uform.thirdSaleId" />
				</el-form-item>
				<el-form-item label="是否为零售店" prop="thirdKindIf">
					<el-select v-model="uform.thirdKindIf"
							   size="large"
							   style="width: 240px">
						<el-option v-for="item in options"
								   :key="item.text"
								   :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="dialogVisible = false">取消</el-button>
					<el-button type="primary" v-on:click="upOk()">
						变更
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>

	<el-dialog v-model="dialogVisibleAdd"
			   title="III级机构添加"
			   width="800">
		<span>
			<el-form ref="uruleFormRefAdd" :model="uformAdd" label-width="auto" style="max-width: 750px">
				<el-form-item label="I级机构名称" prop="firstKindName">
					<el-select v-model="uformAdd.firstKindName"
							   placeholder="请选择"
							   size="large"
							   style="width: 240px">
						<el-option v-for="item in FAdd"
								   :key="item.ffkId"
								   :label="item.firstKindName"
								   :value="item.firstKindId+item.firstKindName"
								   v-on:click="qqq()" />
					</el-select>
				</el-form-item>
				<el-form-item label="II级机构名称" prop="secondKindName">
					<el-select v-model="uformAdd.secondKindName"
							   placeholder="请选择"
							   size="large"
							   style="width: 240px">
						<el-option v-model="secondXiaLa"
								   v-for="item in SAdd"
								   :key="item.fskId"
								   :label="item.secondKindName"
								   :value="item.secondKindId+item.secondKindName" />
					</el-select>
				</el-form-item>
				<el-form-item label="III级机构编号" prop="thirdKindId">
					<el-input v-model="uformAdd.thirdKindId" />
				</el-form-item>
				<el-form-item label="III级机构名称" prop="thirdKindName">
					<el-input v-model="uformAdd.thirdKindName" />
				</el-form-item>
				<el-form-item label="薪酬发放责任人编号" prop="thirdSaleId">
					<el-input type="textarea" rows="5" v-model="uformAdd.thirdSaleId" />
				</el-form-item>
				<el-form-item label="是否为零售店" prop="thirdKindIf">
					<el-select v-model="uformAdd.thirdKindIf"
							   placeholder="请选择"
							   size="large"
							   style="width: 240px">
						<el-option v-for="item in options"
								   :key="item.text"
								   :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="udialogVisibleAdd = false">取消</el-button>
					<el-button type="primary" v-on:click="Addok()">
						添加
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>

</div>

<script type="text/javascript">
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			var tableData = ref([])
			let dialogVisible = ref(false);
			const uruleFormRef = ref(null);
			let dialogVisibleAdd = ref(false);
			const uruleFormRefAdd = ref(null);
			//修改的下拉框值
			const options = [
				{ text: "是", value: "是" },
				{ text: "否", value: "否" },
			];
			//修改的数据
			const uform = reactive({
				ftkId: '',
				firstKindName: '',
				secondKindName: '',
				thirdKindId: '',
				thirdKindName: '',
				thirdSaleId: '',
				thirdKindIf: ''
			})
			//增加的数据
			const uformAdd = reactive({
				ftkId: '',
				firstKindId: '',
				firstKindName: '',
				secondKindId: '',
				secondKindName: '',
				thirdKindId: '',
				thirdKindName: '',
				thirdSaleId: '',
				thirdKindIf: ''
			})
			//查询所有
			function Fill() {
				axios.get('/CFTK/GetCFTK')
					.then(res => {
						tableData.value = res.data;
					})
			}
			Fill();

			//点击变更，弹出修改模态框并赋值
			function handleEdit(row) {
				console.info(row.thirdKindIf)
				dialogVisible.value = true;
				uform.ftkId = row.ftkId;
				uform.firstKindName = row.firstKindName;
				uform.secondKindName = row.secondKindName;
				uform.thirdKindId = row.thirdKindId;
				uform.thirdKindName = row.thirdKindName;
				uform.thirdSaleId = row.thirdSaleId;
				uform.thirdKindIf = row.thirdKindIf;
			}
			//点击确定，确定修改
			function upOk() {
				uruleFormRef.value.validate((valid, fields) => {
					if (valid) {
						axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
						axios.put('/CFTK/UpdateCFTK', {
							ftkId: uform.ftkId,
							firstKindName: uform.firstKindName,
							secondKindName: uform.secondKindName,
							thirdKindId: uform.thirdKindId,
							thirdKindName: uform.thirdKindName,
							thirdSaleId: uform.thirdSaleId,
							thirdKindIf: uform.thirdKindIf
						}).then(res => {
							if (res.data) {
								console.info(res.data)
								alert("修改成功")
								Fill();
								dialogVisible.value = false;
							}
						}).catch(err => {
							console.log(err);
						})
					} else {
						console.log('error submit!', fields)
					}
				})
			}
			//点击删除
			function handleDelete(ftkId) {
				console.info(ftkId)
				if (confirm("确定删除")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/CFTK/DeleteCFTK', {
						id: ftkId
					}).then(res => {
						if (res.data) {
							Fill();
						}
					}).catch(err => {
						console.log(err);
					})
				}

			}
			const FAdd = ref(null);
			const SAdd = ref(null);
			let ffid = ref(null);
			let str = ref(null);
			let ffname = ref(null);
			let fsid = ref(null);
			let strs = ref(null);
			let fsname = ref(null);
			let secondXiaLa = ref(false);
			axios.get('/CFFK/GetCFFK')
				.then(res => {
					FAdd.value = res.data
				})
			//点击一级下拉框，出现二级
			function qqq() {
				str.value = uformAdd.firstKindName;
				ffid.value = str.value.substring(0, 2);
				ffname.value = str.value.substring(2);
				secondXiaLa.value = true;
				axios.get(`/GetCFSKById/${ffid.value}`).then(response => {
					SAdd.value = response.data
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}

			//点击增加，弹出增加模态框
			function Add() {
				dialogVisibleAdd.value = true;
				qk();
			}
			//点击确定添加
			function Addok() {
				str.value = uformAdd.firstKindName;
				ffid.value = str.value.substring(0, 2);
				ffname.value = str.value.substring(2);
				strs.value = uformAdd.secondKindName;
				fsid.value = strs.value.substring(0, 2);
				fsname.value = strs.value.substring(2);
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.put('/CFTK/AddCFTK', {
					firstKindId: ffid.value,
					firstKindName: ffname.value,
					secondKindId: fsid.value,
					secondKindName: fsname.value,
					thirdKindId: uformAdd.thirdKindId,
					thirdKindName: uformAdd.thirdKindName,
					thirdSaleId: uformAdd.thirdSaleId,
					thirdKindIf: uformAdd.thirdKindIf,
				}).then(res => {
					if (res.data) {
						alert("添加成功")
						Fill();
						dialogVisibleAdd.value = false;
					}
				}).catch(err => {
					console.log(err);
				})
			}
			//清空模态框
			function qk() {
				ftkId: '';
				firstKindId: '';
				firstKindName: '';
				secondKindId: '';
				secondKindName: '';
				thirdKindId: '';
				thirdKindName: '';
				thirdSaleId: '';
				thirdKindIf: '';
			}
			return {
				tableData,
				Add,
				dialogVisible,
				uruleFormRef,
				uform,
				handleEdit,
				options,
				upOk,
				handleDelete,
				dialogVisibleAdd,
				uruleFormRefAdd,
				uformAdd,
				FAdd,
				Addok,
				qqq,
				secondXiaLa,
				ffid,
				str,
				ffname,
				SAdd


			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	body {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
	}
</style>
